import React, { useState } from "react";
import { useNavigate, Link } from "react-router-dom";
import { Button, Space, Divider, Tag, Modal } from "antd";
import {
  EditOutlined,
  LineChartOutlined,
  StarOutlined,
  CopyOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons";

import styles from "./QuestionCard.module.scss";
import { QuestionType } from "../../types";
import { QUESTION_EDIT_PATHNAME, QUESTION_STAT_PATHNAME } from "../../router";
import { useRequest } from "ahooks";
import { updateQuestionService } from "../../services/question";
import useGetUserInfo from "../../hooks/useGetUserInfo";
import useEditQuestion from "../../hooks/useEditQuestion";
import useDuplicateQuestion from "../../hooks/useDuplicateQuestion";

const { confirm } = Modal;

const QuestionCard: React.FC<QuestionType> = (props: QuestionType) => {
  const nav = useNavigate();
  const {
    id,
    title,
    isPublished,
    isStar,
    answerCount,
    createdId,
    createdBy,
    updatedAt,
  } = props;
  const [isStarState, setIsStarState] = useState(isStar);
  const { userId, isAdmin } = useGetUserInfo();
  const { editQuestion } = useEditQuestion();
  const { duplicateLoading, duplicate } = useDuplicateQuestion();

  const { loading: changeStarLoading, run: changeStar } = useRequest(
    async () => {
      await updateQuestionService(id, { isStar: !isStarState });
    },
    {
      manual: true,
      onSuccess() {
        setIsStarState(!isStarState);
      },
    }
  );

  const [isDeletedState, setIsDeletedState] = useState(false);
  const { loading: deleteLoading, run: deleted } = useRequest(
    async () => await updateQuestionService(id, { isDeleted: true }),
    {
      manual: true,
      onSuccess() {
        setIsDeletedState(true);
      },
    }
  );

  function del() {
    confirm({
      title: "确定删除吗？",
      content: "可在回收站恢复",
      icon: <ExclamationCircleOutlined />,
      onOk: () => {
        deleted();
      },
    });
  }

  if (isDeletedState) return null;

  return (
    <div className={styles.card}>
      <div className={styles.header}>
        <div className={styles.left}>
          <Link
            to={
              (isPublished ? QUESTION_STAT_PATHNAME : QUESTION_EDIT_PATHNAME) +
              id
            }
          >
            <Space style={{ padding: "2px 7px 0", fontSize: "16px" }}>
              {isStarState && <StarOutlined style={{ color: "red" }} />}
              {title}
            </Space>
          </Link>
        </div>
        <div className={styles.right}>
          <Space>
            {isAdmin && userId !== createdId ? (
              <Tag color="success">{createdBy}</Tag>
            ) : null}
            {isPublished ? (
              <Tag color="processing">已发布</Tag>
            ) : (
              <Tag>未发布</Tag>
            )}
            <span>答卷：{answerCount}</span>
            <span>{updatedAt}</span>
          </Space>
        </div>
      </div>
      <Divider style={{ margin: "12px 0" }} />
      <div className={styles.footer}>
        <div className={styles.left}>
          <Space>
            <Button
              icon={<EditOutlined />}
              type="text"
              size="small"
              onClick={() => editQuestion(id)}
            >
              编辑问卷
            </Button>
            <Button
              icon={<LineChartOutlined />}
              type="text"
              size="small"
              onClick={() => nav(QUESTION_STAT_PATHNAME + id)}
              disabled={!isPublished}
            >
              数据统计
            </Button>
          </Space>
        </div>
        <div className={styles.right}>
          <Space>
            <Button
              icon={<StarOutlined />}
              type="text"
              size="small"
              onClick={changeStar}
              disabled={changeStarLoading}
            >
              {isStarState ? "取消标星" : "标星"}
            </Button>
            <Button
              icon={<CopyOutlined />}
              type="text"
              size="small"
              onClick={() => duplicate(id)}
              loading={duplicateLoading}
            >
              复制
            </Button>
            <Button
              style={{ color: "red" }}
              icon={<DeleteOutlined />}
              type="text"
              size="small"
              onClick={del}
              loading={deleteLoading}
            >
              删除
            </Button>
          </Space>
        </div>
      </div>
    </div>
  );
};

export default QuestionCard;
